<template lang="html">
  <div>
    <div class="step3">
        <el-form :model="ruleForm" label-position="left" :rules="rules" ref="ruleForm" label-width="2rem" class="demo-ruleForm">
          <el-form-item label="姓名"  prop="name">
            <el-input v-model="ruleForm.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idCard">
            <el-input v-model="ruleForm.idCard" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankCark">
            <el-input v-model.number="ruleForm.bankCark" ref="tel"></el-input>
          </el-form-item>
          <el-form-item label="预留手机号" prop="tel">
            <el-input v-model.number="ruleForm.tel" ref="tel"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="checkCode">
            <el-input v-model="ruleForm.checkCode"></el-input>
            <button disabled class="el-button el-button--info el-button--mini is-round getCode" ref="getCode" @click="getCode('getCode')">{{ codeVal }}</button>
          </el-form-item>
          <el-form-item label="" prop="agreement" style="margin:.6rem 0 0 -1rem">
            <el-checkbox-group v-model="ruleForm.agreement">
              <el-checkbox name="type">阅读并同意<span @click="showAgreement">《<a href="javascript:void(0)" class="agreement">吉分期代扣协议</a>》</span></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

        <!-- <el-button type="warning" name="button"><router-link to="/payment/233">点我免验证通过-去还款</router-link></el-button> -->
    </div>
    <div class="fixBtnShim"></div>
    <a href="javascript:void(0)" class="fixBtn" @click="myEmite"><span>完成</span></a>
  </div>

</template>

<script>
import {MessageBox, CheckboxGroup} from 'element-ui'
import {mapMutations} from 'vuex'

export default {
  components:{
    elCheckboxGroup:CheckboxGroup
  },
  data() {
     return {
       checkboxStatu:true,
       codeVal: '获取验证码',
       disStatus:true,
       userId:'',
       ruleForm:{
         name: '',
         idCard:'',
         tel:'',
         checkCode:'',
         bankCark:'',
         agreement:[]
       },
       rules:{
         name:[
           {required:true, message: '请输入姓名',trigger:'blur'},
           {min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur'}
         ],
         bankCark:[
           {required:true, message: '银行卡号不能为空',trigger:'blur'},
           {validator:this.checkBankCark ,trigger:'blur'}
         ],
         // idCard: [
         //   {required:true, message: '请输入身份证号码',trigger:'blur'},
         //   {validator:this.checkIdCard ,trigger:'blur'}
         // ],
         tel: [
           { required: true, message: '请输入手机号码', trigger: 'blur' },
           {validator: this.checkTelA, trigger: 'blur'}
         ],
         checkCode: [
           { required: true, message: '请输入验证码', trigger: 'blur' },
           {min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur'}
         ],
         agreement: [
           { type: 'array', required: true, message: '请同意代扣协议', trigger: 'change' }
         ]
       }
     };
   },
   async beforeMount(){
     this.userId = this.$route.params.userId;
     this.oUserInfo = await this.$store.dispatch('getUserMsg',{userId:this.userId})
     console.log(this.oUserInfo);
     this.ruleForm.name = this.oUserInfo.name;
     this.ruleForm.idCard = this.oUserInfo.cardNumber;

   },
   mounted(){
     this.setTit('完善信息')
     MessageBox.alert('银行预留的手机号是办理该银行卡所填写的手机号。没有预留、忘记或停用的手机号，请联系银行客服更新处理。', '预留手机号说明', {
       confirmButtonText: '确定',
     });
   },
   methods: {
     ...mapMutations([
       'starLoading','closeLoading'
     ]),
     showAgreement(){
       let a = `
        <div class="showAgreement"><p>
            本协议是北京吉星众创网络科技有限公司（以下简称“吉星分期”）与您在平等自愿的前提下，本着互惠互利的原则，就您自愿使用吉星分期代扣服务（以下简称“代扣”）相关事项所订立的有效协议。您通过吉星分期指定页面点击确认本协议条款或以其他方式选择接受吉星分期提供的代扣服务，即表示您与吉星分期已达成同意接受本协议的全吉星分期部内容。
          </p>
          <p>
            在接受本协议条款之前，请您仔细阅读本协议的全部内容。如果您对本协议的条款有疑问的，请通过吉星分期客服渠道进行询问，吉星分期将向您解释条款内容。如果您不同意本协议的任意内容，或者无法准确理解吉星分期对条款的解释，请不要进行后续操作。
          </p>
          <p>
            本《协议》是用户与北京吉星众创网络科技有限公司之间的法律协议。
          </p>
          <p>
            北京吉星众创网络科技有限公司是吉星分期的所有者及经营者。
          </p>
          <p>
            北京吉星众创网络科技有限公司可能与金融机构合作。吉星分期平台与合作金融机构（包括但不限于保险公司、银行、基金公司、证券公司、支付公司、银行等，以下均同）系统相连，通过合作的金融机构在吉星分期平台设置的网上自动扣款功能，向您提供代扣服务。
          </p>
          <p>
            您承诺自己在使用吉星分期提供的本项服务时，实施的所有行为均遵守国家法律、法规和吉星分期的相关规定以及各种社会公共利益或公共道德。您利用本服务从事非法活动或不正当交易产生的一切后果与责任，由您独立承担。同时您在此授权，吉星分期有权根据您设置的代扣信息，在一定的时间对您的账单进行查询,并根据查询结果自您的吉星分期账户扣款，以便完成您所选择的代扣服务内容。
          </p>
          <p>
            您保证您在使用本产品过程中提供的资料真实、准确、完整、有效。对于因您提供信息不真实或不完整所造成的损失由您自行承担。您必须正确填写相关页面信息，并且妥善保管预留信息，除在吉星分期办理业务时使用外，不要向任何其他人、其他网站、电话或短信的问询提供预留的信息内容；您对通过以上信息完成的一切款项代扣行为负责。同时您须确保通过“代扣”服务设置银行卡代扣过程中，不违背各银行的相关业务条款，且该银行卡为您本人所有，否则因此导致的责任均由您自行承担。
          </p>
          <p>
            您有权变更委托付款银行，但您在变更新的委托付款银行前，必须提前通知吉星分期并与吉星分期签署相关变更协议。因付款行系统升级造成您账号发生变化时，旧付款账号会自动变更为新的付款账号，同时吉星分期将与您进行确认。
          </p>
        </div>
       `;
       MessageBox.alert(a, '代扣协议', {
          dangerouslyUseHTMLString: true
      });
     },
     checkAgreement(rule, value, callback){
       console.log(value);
     },
     checkIdCard(rule, value, callback) {
      if(isIdCardNo(value)){
        callback();
      }else{
        callback(new Error('请输入有效的身份证号码'))
      }
     },
     checkBankCark(rule, value, callback) {
       console.log(value,typeof value);
      if(checkBankNo(value.toString())){
        callback();
      }else{
        callback(new Error('请输入有效的银行卡号'))
      }
     },
     checkTelA(rule, value, callback) {
       let val = value.toString().trim()
       let btn = this.$refs['getCode']
       btn.setAttribute('disabled', 'disabled')
       if (!val) {
         callback(new Error('手机号不能为空'))
       } else if (val.length !== 11 || !Number.isInteger(value) || !/^1[3|4|5|7|8]\d{9}$/.test(val)) {
         callback(new Error('手机格式不对'))
       } else {
         if(this.disStatus){
           btn.removeAttribute('disabled')
           this.disStatus = false;
         }
         callback()
       }
     },
     getCode() {

       let btn = this.$refs['getCode'],
           tel = this.$refs.tel.$refs.input,
           num = 6;
           console.log(btn,tel);
           btn.setAttribute('disabled', 'disabled')
           tel.setAttribute('disabled', 'disabled');

        this.$store.dispatch('getSmsCode',{remainPhone:this.ruleForm.tel})
         this.codeVal = (num + 's后重新重新发送')
         this.timer = setInterval(() => {
           console.log('run')
            if (num > 1) {
               this.codeVal = (--num + 's后重新重新发送')
            } else {
                btn.removeAttribute('disabled')
                this.codeVal = ('发送验证码')
                this.disStatus = true;
                tel.removeAttribute('disabled')
                clearInterval(this.timer)
            }
        }, 1000)
     },
     myEmite(){
       let fm1 = this.submitForm('ruleForm');
       if(!fm1){
         // console.log(this.$refs['ruleForm'].$el.offsetTop);
         window.scrollTo(0,this.$refs['ruleForm'].$el.offsetTop - 60)
         return;
       }else{
         this.$emit('sonEmite');
       }
     },
     submitForm(refName) {
       this.$refs[refName].validate(valid => {
         if (valid) {
           this.starLoading();
           this.$store.dispatch('supplementUserMsgBank',{
             userId:this.userId,
             cardName:this.ruleForm.name,
             idcard:this.ruleForm.idCard,
             cardNo:this.ruleForm.bankCark.toString(),
             smsCode:this.ruleForm.checkCode,
             remainPhone:this.ruleForm.tel.toString()
           }).then(res=>{
             console.log('res:',res);
             this.closeLoading();

             MessageBox.alert(res.msg, '', {
               confirmButtonText: '确定',
             });
           })
           // setTimeout(() => {
           //   this.closeLoading();
           //   clearInterval(this.timer)
           //   MessageBox.alert('绑定成功', '', {
           //     confirmButtonText: '确定',
           //   });
           // },1000)

         } else {
           console.log('err')
           return false
         }
       })
     },
   }
}

/**
 * 检查银行卡号是否符合规则
 * @param bankno 银行卡号
 * @returns
 */
function checkBankNo(bankno) {
    var bankno = bankno.replace(/\s/g, '');

    if (bankno.length < 16 || bankno.length > 19) {
        return false;
    }
    var num = /^\d*$/;// 全数字
    if (!num.exec(bankno)) {
        return false;
    }
    // 开头两位
    var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
    if (strBin.indexOf(bankno.substring(0, 2)) == -1) {
        return false;
    }
    // luhn校验
    // if (!luhnCheck(bankno)) {
    //     return false;
    // }
    return true;
}

/**
 * 银行卡号luhn校验算法
 * luhn校验规则：16位银行卡号（19位通用）:
 * 1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
 * 2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
 * 3.将加法和加上校验位能被 10 整除。
 * @param bankno 银行卡号
 * @returns
 */
// function luhnCheck(bankno) {
//     var lastNum = bankno.substr(bankno.length - 1, 1);// 取出最后一位（与luhn进行比较）
//     var first15Num = bankno.substr(0, bankno.length - 1);// 前15或18位
//     var newArr = new Array();
//     for (var i = first15Num.length - 1; i > -1; i--) { // 前15或18位倒序存进数组
//         newArr.push(first15Num.substr(i, 1));
//     }
//     var arrJiShu = new Array(); // 奇数位*2的积 <9
//     var arrJiShu2 = new Array(); // 奇数位*2的积 >9
//     var arrOuShu = new Array(); // 偶数位数组
//     for (var j = 0; j < newArr.length; j++) {
//         if ((j + 1) % 2 == 1) {// 奇数位
//             if (parseInt(newArr[j]) * 2 < 9) {
//                 arrJiShu.push(parseInt(newArr[j]) * 2);
//             } else {
//                 arrJiShu2.push(parseInt(newArr[j]) * 2);
//             }
//         } else {
//             arrOuShu.push(newArr[j]);// 偶数位
//         }
//     }
//
//     var jishu_child1 = new Array();// 奇数位*2 >9 的分割之后的数组个位数
//     var jishu_child2 = new Array();// 奇数位*2 >9 的分割之后的数组十位数
//     for (var h = 0; h < arrJiShu2.length; h++) {
//         jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
//         jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
//     }
//     var sumJiShu = 0; // 奇数位*2 < 9 的数组之和
//     var sumOuShu = 0; // 偶数位数组之和
//     var sumJiShuChild1 = 0; // 奇数位*2 >9 的分割之后的数组个位数之和
//     var sumJiShuChild2 = 0; // 奇数位*2 >9 的分割之后的数组十位数之和
//     var sumTotal = 0;
//     for (var m = 0; m < arrJiShu.length; m++) {
//         sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
//     }
//     for (var n = 0; n < arrOuShu.length; n++) {
//         sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
//     }
//     for (var p = 0; p < jishu_child1.length; p++) {
//         sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
//         sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
//     }
//     // 计算总和
//     sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu)
//             + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2);
//     // 计算luhn值
//     var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
//     var luhn = 10 - k;
//     if (lastNum == luhn) {
//         console.log("验证通过");
//         return true;
//     } else {
//         alert("银行卡号必须符合luhn校验");
//         return false;
//     }
// }

function isIdCardNo(num) {
    num = num.toUpperCase();           //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
    if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {
        //alert('输入的 createAlert('注意',不对，或者号码不符合规定！\n15位号码应全为数字，18位号码末位可以为数字或X。');
        return false;
    }
    //验证前2位，城市符合
    var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
    if(aCity[parseInt(num.substr(0,2))] == null){
        return false;
    }
    //alert('城市:'+aCity[parseInt(num.substr(0,2))]);

    //下面分别分析出生日期和校验位
    var len, re; len = num.length;
    if (len == 15) {
        re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
        var arrSplit = num.match(re);  //检查生日日期是否正确
        var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
        var bGoodDay; bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
        if (!bGoodDay) {
           // alert('身份证号的出生日期不对！');
            return false;
        } else { //将15位身份证转成18位 //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var nTemp = 0, i;
            num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
            for(i = 0; i < 17; i ++) {
                nTemp += num.substr(i, 1) * arrInt[i];
            }
            num += arrCh[nTemp % 11];
            return true;
        }
    }
    if (len == 18) {
        re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
        var arrSplit = num.match(re);  //检查生日日期是否正确
        var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
        var bGoodDay; bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
        if (!bGoodDay) {
            //alert(dtmBirth.getYear());
            //alert(arrSplit[2]);
            //alert('身份证号的出生日期不对！');
            return false;
        }
        else { //检验18位身份证的校验码是否正确。 //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            var valnum;
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var nTemp = 0, i;
            for(i = 0; i < 17; i ++) {
                nTemp += num.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum != num.substr(17, 1)) {
                //alert('18位身份证的校验码不正确！应该为：' + valnum);
                //alert('18位身份证号的校验码不正确！');
                return false;
            }
            return true;
        }
    } return false;

}

</script>

<style lang="scss">
.step3{
  padding: 0 .72rem;
  .getCode{position: absolute;right:0;top:0;font-size: .26rem;}
  .getCode[disabled]{color: #909399;background: #f4f4f5;border-color: #d3d4d6;}
  .el-checkbox__input.is-checked .el-checkbox__inner{border-color:#74d220;background-color: #74d220;}
  .el-checkbox__label{font-size: .26rem;letter-spacing: .02rem;color:#999;}
  .el-checkbox__label span{color:#333;}
  .agreement{text-decoration: underline;line-height: 1.2;}
  .el-form{margin-bottom: 1.4rem;}

}
.showAgreement{height:7.2rem;overflow: scroll;overflow-x:hidden;box-sizing: border-box;padding:0 0 .2rem}
.showAgreement p{font-size: .24rem!important;line-height: .36rem;margin-bottom:1em;}
div .el-message-box{width:80%;padding-bottom: .2rem;font-size: .26rem;border-radius: .08rem;}
div .el-message-box__title{font-size: .32rem;}
div .el-message-box__content{font-size: .22rem;color:#999;}
</style>
